<template>
  <view>
    <!-- 遮罩层 -->
    <view v-if="show" class="drawer-mask" @tap="close"></view>

    <!-- 抽屉内容 -->
    <view v-show="show" class="drawer-container" @touchmove.stop.prevent :class="{ 'drawer-show': show }">
      <view class="drawer-header">
        <view class="close-btn"></view>
        <text v-if="showTitle" class="drawer-title">{{ title }}</text>
      </view>
      <scroll-view scroll-y class="drawer-options">
        <slot></slot>
      </scroll-view>
      <view v-if="showBtns" class="drawer-footer-btns">
        <button class="drawer-btn cancel" @tap="cancel" v-if="showCancle">{{ cancelText }}</button>
        <button class="drawer-btn confirm" @tap="confirm">{{ confirmText }}</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
	name: 'Drawer',
	props: {
		show: {
			type: Boolean,
			default: false
		},
		showTitle: {
			type: Boolean,
			default: true
		},
		showBtns: {
			type: Boolean,
			default: true
		},
		title: {
			type: String,
			default: ''
		},
		showCancle: {
			type: Boolean,
			default: true
		},
		// 点击取消的时候，是否关闭弹窗
		cancelEvent: {
			type: Boolean,
			default: true
		},
		confirmEvent: {
			type: Boolean,
			default: true
		},
		confirmText: {
			type: String,
			default: '确定'
		},
		cancelText: {
			type: String,
			default: '取消'
		}
	},
	data() {
		return {
			selected: 0
		};
	},
	methods: {
		close() {
			this.$emit('close');
		},
		cancel() {
			this.$emit('cancel', this.selected);
			if (this.cancelEvent) {
				this.close();
			}
		},
		confirm() {
			this.$emit('confirm', this.selected);
			if (this.confirmEvent) {
				this.close();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@keyframes anm2 {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(0);
  }
}

.drawer-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 299;
}

.drawer-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  z-index: 500;
  animation: anm2 0.3s;

  &.drawer-show {
    // transform: translateY(0);
  }

  .drawer-header {
    padding: 48rpx 32rpx 18rpx 32rpx;
    border-bottom: 1px solid #eee;
    position: relative;

    .close-btn {
      width: 64rpx;
      height: 10rpx;
      border-radius: 2rem;
      background: #D8D8D8;
      position: absolute;
      top: 20rpx;
      left: calc(50% - 32rpx);
    }

    .drawer-title {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
    }
  }

  .drawer-options {
    max-height: 60vh;
    overflow-y: scroll;
  }

  .drawer-footer-btns {
    display: flex;
    width: calc(100% - 80rpx);
    padding: 22rpx 40rpx;
    border-top: 1px solid #eee;

    .drawer-btn {
      font-size: 28rpx;
      height: 68rpx;
      line-height: 68rpx;
      border: none;
      flex: 1;
      width: 100%;

      &.cancel {
        background: #f7fafd;
        color: #1890ff;
      }

      &.confirm {
        background: #1890ff;
        color: #fff;
      }
    }

    .drawer-btn:first-child {
      border-bottom-left-radius: 8rpx;
      border-top-left-radius: 8rpx;
    }

    .drawer-btn:last-child {
      border-bottom-right-radius: 8rpx;
      border-top-right-radius: 8rpx;
    }
  }
}
</style>
